<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('年份')" prop="year">
        <DatePicker
          v-model="queryParams.year"
          type="year"
          value-format="yyyy"
          :placeholder="$t('年份')"
          @change="getChartList"
        />
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="12">
        <div class="list-table boxShadow">
          <div class="area-header">
            <span class="area-header-title">{{ $t('投资阶段') }}</span>
          </div>
          <Empty :data="roundData.datas">
            <barLineChart v-loading="loading" height="350px" :chart-data="roundData" />
          </Empty>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="list-table boxShadow">
          <div class="area-header">
            <span class="area-header-title">{{ $t('投资行业') }}</span>
          </div>
          <Empty :data="industryData.datas">
            <barLineChart v-loading="loading" height="350px" :chart-data="industryData" />
          </Empty>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="list-table boxShadow">
          <div class="area-header">
            <span class="area-header-title">{{ $t('投资规模') }}</span>
          </div>
          <Empty :data="amountData.datas">
            <barLineChart v-loading="loading" height="350px" :chart-data="amountData" />
          </Empty>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="list-table boxShadow">
          <div class="area-header">
            <span class="area-header-title">{{ $t('投资案例') }}</span>
          </div>
          <Empty :data="countData.datas">
            <barLineChart v-loading="loading" height="350px" :chart-data="countData" />
          </Empty>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getInvestAnalyze } from '@/api/fund/gp/tycInvest/gpInvestAnalyze'
import barLineChart from '@/views/chart/barLineChart.vue'
export default {
  components: { barLineChart },
  data() {
    return {
      // 投资金额统计
      amountData: {
        datas: []
      },
      // 行业数据
      industryData: {
        datas: []
      },
      // 投资个数数据
      countData: {
        datas: []
      },
      // 投资轮次数据
      roundData: {
        datas: []
      },
      // 加载
      loading: false,
      // 当前日期
      nowDate: new Date(),
      // 查询参数
      queryParams: {
        gpId: this.$route.query.gpId,
        year: new Date().getFullYear() + ''
      }
    }
  },
  created() {
    this.getChartList()
  },
  methods: {
    getChartList() {
      // 获取chart数据
      this.loading = true
      getInvestAnalyze(this.queryParams).then(response => {
        var industry = response.data.industry || []
        if (industry.length > 0) {
          this.industryData = {
            datas: [
              { name: this.$t('行业个数'), type: 'bar', data: industry.map(v => { return { name: v.name, value: v.value } }) }
            ],
            seriesLabelShow: true,
            xLabel: industry.map(v => v.name)
          }
        } else {
          this.industryData = { datas: [], xLabel: [] }
        }
        var amount = response.data.amount || []
        if (amount.length > 0) {
          this.amountData = {
            datas: [
              { name: this.$t('投资金额'), type: 'bar', data: amount.map(v => { return { name: v.name, value: v.value } }) }
            ],
            valueFormatter: true,
            seriesLabelShow: true,
            xLabel: amount.map(v => v.name)
          }
        } else {
          this.amountData = { datas: [], xLabel: [] }
        }
        var count = response.data.count || []
        if (count.length > 0) {
          this.countData = {
            datas: [
              { name: this.$t('投资个数'), type: 'bar', data: count.map(v => { return { name: v.name, value: v.value } }) }
            ],
            seriesLabelShow: true,
            xLabel: count.map(v => v.name)
          }
        } else {
          this.countData = { datas: [], xLabel: [] }
        }
        var round = response.data.round || []
        if (round.length > 0) {
          this.roundData = {
            datas: [
              { name: this.$t('轮次'), type: 'bar', data: round.map(v => { return { name: v.name, value: v.value } }) }
            ],
            seriesLabelShow: true,
            xLabel: round.map(v => v.name)
          }
        } else {
          this.roundData = { datas: [], xLabel: [] }
        }
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getTableList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.dateRange = undefined
      this.queryHandle()
    }
  }
}
</script>

<style scoped>
.area-header-title{
    padding-left: 10px;
}
</style>
